<template>
  <div class="admin-layout" :class="{ 'sidebar-collapsed': isSidebarCollapsed }">
    <el-container>
      <Sidebar :collapsed="isSidebarCollapsed" />
      <el-container direction="vertical">
        <div class="fixed-header">
          <Header :collapsed="isSidebarCollapsed" @toggle-collapse="toggleSidebar" />
          <ContentTabs />
        </div>
        <div class="main-bg">
          <div class="content-wrapper">
            <router-view v-slot="{ Component, route }">
              <transition 
                name="page-fade" 
                mode="out-in"
                @before-enter="beforeEnter"
                @enter="enter"
                @leave="leave"
              >
                <component :is="Component" :key="route.path" />
              </transition>
            </router-view>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Sidebar from './Sidebar.vue'
import Header from './Header.vue'
import ContentTabs from './ContentTabs.vue'

const isSidebarCollapsed = ref(false)
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 页面切换动画方法
const beforeEnter = (el) => {
  el.style.opacity = '0'
  el.style.transform = 'translateY(20px)'
}

const enter = (el, done) => {
  setTimeout(() => {
    el.style.transition = 'all 0.3s ease-out'
    el.style.opacity = '1'
    el.style.transform = 'translateY(0)'
    done()
  }, 50)
}

const leave = (el, done) => {
  el.style.transition = 'all 0.2s ease-in'
  el.style.opacity = '0'
  el.style.transform = 'translateY(-10px)'
  setTimeout(done, 200)
}
</script>
<style scoped>
.admin-layout {
  min-height: 100vh;
  display: flex;
  padding-left: 250px; /* 为固定侧边栏留出空间 */
  transition: padding-left 0.2s cubic-bezier(.4,0,.2,1);
}

.admin-layout.sidebar-collapsed {
  padding-left: 64px; /* 侧边栏折叠时的左边距 */
}
.fixed-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  /* 不要分割线，Header和Tabs紧贴 */
}
.header {
  margin-bottom: 0;
  box-shadow: none;
  border-bottom: none;
}
.content-tabs {
  margin-bottom: 0;
  box-shadow: none;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}
.main-bg {
  flex: 1;
  min-height: calc(100vh - 100px);
  overflow: auto;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 0 0 0;
  width: 100%;
}
.content-wrapper {
  width: 100%;
  max-width: 1400px;
  min-height: 600px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 20px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 确保router-view内容居中 */
.content-wrapper > * {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* 确保所有表格和卡片居中 */
.content-wrapper :deep(.el-table),
.content-wrapper :deep(.el-card),
.content-wrapper :deep(.role-management),
.content-wrapper :deep(.user-management),
.content-wrapper :deep(.permission-management),
.content-wrapper :deep(.dashboard) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* 调试样式（已禁用） */
/* 调试样式占位已移除 */

@media (max-width: 1400px) {
  .content-wrapper {
    max-width: 95vw;
    margin: 0 auto;
    padding: 16px;
  }
}

/* 移动设备响应式处理 */
@media (max-width: 768px) {
  .admin-layout {
    padding-left: 0; /* 小屏幕默认不预留侧边栏空间 */
  }
  
  .admin-layout.sidebar-collapsed {
    padding-left: 0; /* 折叠时不占用空间 */
  }
  .admin-layout:not(.sidebar-collapsed) {
    padding-left: 250px; /* 展开时预留侧边栏空间 */
  }
}
.el-container {
  min-height: 100vh;
  width: 100%;
}
.el-aside {
  min-height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width 0.2s cubic-bezier(.4,0,.2,1);
}
.el-main {
  min-height: 100vh;
  overflow: visible;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 页面切换动画样式 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease;
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 确保内容区域有正确的定位 */
.content-wrapper {
  position: relative;
  overflow: visible;
}
</style>